<template>
    <div class="points-container">
        <el-menu :default-active="activeMenu" class="sub-menu" router mode="horizontal">
            <el-menu-item index="/admin/points/lottery">
                抽奖活动
            </el-menu-item>
            <el-menu-item index="/admin/points/rules">
                积分规则
            </el-menu-item>
            <el-menu-item index="/admin/points/records">
                抽奖记录
            </el-menu-item>
            <el-menu-item index="/admin/points/logs">
                积分记录
            </el-menu-item>
            <el-menu-item index="/admin/points/ranking">
                积分排行
            </el-menu-item>
        </el-menu>
        <router-view />
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
    name: 'PointsIndex',
    setup() {
        const route = useRoute()

        // 计算当前激活的菜单项
        const activeMenu = computed(() => {
            const { path } = route
            return path
        })

        return {
            activeMenu
        }
    }
}
</script>

<style scoped>
.points-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sub-menu {
    margin-bottom: 15px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
}

:deep(.el-menu--horizontal > .el-menu-item) {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
}

:deep(.el-menu--horizontal > .el-menu-item.is-active) {
    border-bottom: 2px solid #1890ff;
    color: #1890ff;
}
</style>